const table = document.querySelector('.list')
const total = document.querySelector('.total')
// 获取学生数据
async function getStudentList() {
  const res = await axios({
    url: '/students'
  })
  // console.log(res)
  table.innerHTML = res.data
    .map(item => {
      return `<tr>
    <td>${item.name}</td>
    <td>${item.age}</td>
    <td>${item.gender ? '男' : '女'}</td>
    <td>第${item.group}组</td>
    <td>${item.hope_salary}</td>
    <td>${item.salary}</td>
    <td>${item.province + item.city + item.area}</td>
    <td>
      <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${item.id}></i></a>
      <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${item.id}></i></a>
    </td>
  </tr>`
    })
    .join('')
  total.innerHTML = res.data.length
}
getStudentList()
const modalBox = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalBox)
const ps = document.querySelector('[name=province]')
const cs = document.querySelector('[name=city]')
const as = document.querySelector('[name=area]')
const form = document.querySelector('#form')
const addBtn = document.querySelector('#openModal')
// 获取省市区
async function province() {
  const res = await axios({
    url: '/api/province'
  })
  // console.log(res)
  const getProvince = res.data.map(item => {
    return `<option value="${item}">--${item}--</option>`
  })
  ps.innerHTML = `<option value="">--省份--</option>${getProvince}`
  ps.addEventListener('change', async function () {
    cs.innerHTML = '<option value="">--城市--</option>'
    as.innerHTML = '<option value="">--地区--</option>'
    if (!ps.value) return
    const res = await axios({
      url: '/api/city',
      params: { pname: ps.value }
    })
    const getcity = res.data.map(item => {
      return `<option value="${item}">--${item}--</option>`
    })
    cs.innerHTML = `<option value="">--城市--</option>${getcity}`

    cs.addEventListener('change', async function () {
      as.innerHTML = '<option value="">--地区--</option>'
      if (!cs.value) return
      const res = await axios({
        url: '/api/area',
        params: { pname: ps.value, cname: cs.value }
      })
      const getarea = res.data?.map(item => {
        return `<option value="${item}">--${item}--</option>`
      })
      as.innerHTML = `<option value="">--地区--</option>${getarea}`
    })
  })
}
province()
// 打开添加学生信息页面
addBtn.addEventListener('click', function () {
  form.reset()
  cs.innerHTML = '<option value="">--城市--</option>'
  as.innerHTML = '<option value="">--地区--</option>'
  document.querySelector('.modal-title').innerHTML = '添加学员'
  form.dataset.id = 'add'
  modal.show()
})
// 点击确定添加/修改学生信息
const submit = document.querySelector('#submit')
submit.addEventListener('click', async function () {
  const data = serialize(form, { hash: true })
  modalBox.querySelector('#cb01').checked ? (data.gender = '1') : (data.gender = '0')
  data.age = +data.age
  data.gender = +data.gender
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
  data.group = +data.group
  if (data.group < 1 || data.group > 8) {
    return alert('组号只能为1-8')
  }
  if (form.dataset.id === 'add') {
    const res = await axios({
      url: '/students',
      method: 'post',
      data
    })
    alert(res.message)
    getStudentList()
    modal.hide()
  } else {
    const res = await axios({
      url: '/students/' + form.dataset.id,
      method: 'PUT',
      data
    })
    alert(res.message)
    getStudentList()
    modal.hide()
  }
})
// 修改删除
table.addEventListener('click', async function (e) {
  if (e.target.classList.contains('bi-pen')) {
    const res = await axios({
      url: '/students/' + e.target.dataset.id
    })
    console.log(res)
    const message = form.querySelectorAll('[name')
    console.log(message)
    message.forEach(item => {
      if (item.name === 'gender') {
        res.data[item.name]
          ? (modalBox.querySelector('#cb01').checked = true)
          : (modalBox.querySelector('#cb02').checked = true)
      }
      item.value = res.data[item.name]
    })
    const res1 = await axios({
      url: '/api/city',
      params: { pname: ps.value }
    })
    const getcity = res1.data.map(item => {
      return `<option value="${item}">--${item}--</option>`
    })
    cs.innerHTML = `<option value="">--城市--</option>${getcity}`
    cs.value = res.data.city
    const res2 = await axios({
      url: '/api/area',
      params: { pname: ps.value, cname: cs.value }
    })
    const getarea = res2.data?.map(item => {
      return `<option value="${item}">--${item}--</option>`
    })
    as.innerHTML = `<option value="">--地区--</option>${getarea}`
    as.value = res.data.area
    document.querySelector('.modal-title').innerHTML = '修改学员信息'
    form.dataset.id = res.data.id
    modal.show()
  }
  if (e.target.classList.contains('bi-trash')) {
    const res = await axios({
      url: '/students/' + e.target.dataset.id,
      method: 'DELETE'
    })
    alert('删除成功')
    getStudentList()
  }
})
